<template>
  <div>
    <!-- 新增 修改 详情 -->
    <el-dialog
      width="500px"
      :before-close="cancel"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :show-close="expireFlag">
      <div slot="title" class="dialog-title">
        ({{ tenantName }}) {{ expireFlag ? '续费充值' : '租户已到期，请续费或联系管理员' }}
      </div>
      <strong>到期日期：{{ expireTime }}</strong>
      <div v-if="sellerRechargeOfflinePayApply == null">
        <div style="border-top: solid 1px gainsboro"></div>
        <el-radio-group class="payList" v-model="id">
          <el-radio
            size="medium"
            :border="true"
            :label="item.dictCode"
            v-for="(item, index) in recharge_level_list"
            >续费{{ item.label }}个月：{{ item.value }} JPY</el-radio
          >
        </el-radio-group>
      </div>
      <div v-if="sellerRechargeOfflinePayApply == null" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormDataPayList" :disabled="id ? false : true">
          去支付
        </el-button>
      </div>
      <div
        v-if="sellerRechargeOfflinePayApply"
        style="text-align: center; margin: 40px; font-size: 16px; font-weight: bold">
        线下支付：{{ sellerRechargeOfflinePayApply.amount }} JPY, 续费时长{{
          JSON.parse(sellerRechargeOfflinePayApply.attach).rechargeMonthNums
        }}
        个月<br />（审核中...）
      </div>
      <div v-if="sellerRechargeOfflinePayApply" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelConfirm"> 取消线下支付 </el-button>
      </div>
    </el-dialog>
    <!-- 支付弹框 支付详情-->
    <Pay :show.sync="pay.show" :formData="pay.formData" @getList="relaod" @updataPayType="updataPayType">
      <template #default="{ handlePayMethod }">
        <div style="margin: 20px 0" v-hasPermi="['distribution:user:selectSellerInfo']">线下支付:</div>
        <div class="payContentOffline" v-hasPermi="['distribution:user:selectSellerInfo']">
          <el-button
            :class="{ 'is-active': offlinePayTypestr == 1 }"
            @click="offlinePayType(1, handlePayMethod, 'offlineCash')"
            >现金支付</el-button
          >
          <el-button
            :class="{ 'is-active': offlinePayTypestr == 2 }"
            @click="offlinePayType(2, handlePayMethod, 'offlineTransfer')"
            >银行卡转账</el-button
          >
        </div>
      </template>
    </Pay>
  </div>
</template>

<script>
import { rechargeOfflinePay, rechargeInfo, sellerBatchBillOfflinePayCancel } from '@/api/bill/seller'
import Pay from '@/components/Pay/index.vue'
import { mapGetters } from 'vuex'
import { useDict } from '@/utils/useDict'
export default {
  computed: {
    ...mapGetters(['expireTime', 'expireFlag', 'tenantName', 'sellerRechargeOfflinePayApply']),
  },
  components: { Pay },
  props: {
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      offlinePayTypestr: '', //支付方式
      showClose: false,
      auditPay: false,
      id: '',
      recharge_level_list: [],
      pay: {
        show: false,
        formData: {},
      },
    }
  },

  watch: {
    show: function (newValue) {
      if (newValue) {
        ;(this.id = ''),
          (this.recharge_level_list = []),
          (this.pay = {
            show: false,
            formData: {},
          }),
          this.getTypeList()
      }
    },
  },
  methods: {
    /**取消支付审核 */
    cancelConfirm() {
      let that = this
      this.$modal
        .confirm('是否取消该笔订单的支付审核？')
        .then(function () {
          return sellerBatchBillOfflinePayCancel({ id: that.sellerRechargeOfflinePayApply.id })
        })
        .then(() => {
          this.relaod()
          this.$modal.msgSuccess('取消成功')
        })
    },
    /**确认已经支付刷新页面 */
    relaod() {
      this.$router.go(0)
    },
    updataPayType(selectPayChannel) {
      if (selectPayChannel) {
        this.offlinePayTypestr = selectPayChannel == 'offlineCash' ? 1 : 2
        let that = this
        this.$modal
          .confirm(
            `是否确认${this.offlinePayTypestr == 1 ? '现金支付' : this.offlinePayTypestr == 2 ? '银行卡转账' : ''}支付`,
          )
          .then(function () {
            return rechargeOfflinePay({ id: that.pay.formData.businessId, offlinePayType:that.offlinePayTypestr })
          })
          .then(() => {
            this.$message({ type: 'success', message: '操作成功' })
            this.pay.show = false
            this.relaod()
          })
      } else {
        this.offlinePayTypestr = ''
      }
    },
    /**线下支付方式 */
    offlinePayType(offlinePayType, handlePayMethod, payTypeStr) {
      this.offlinePayTypestr = offlinePayType
      handlePayMethod({ payChannel: payTypeStr })
    },
    /**打开支付弹框获取支付数据 */
    submitFormDataPayList() {
      rechargeInfo({ id: this.id })
        .then((res) => {
          this.pay.show = true
          this.pay.formData = res.data
        })
        .catch(() => {
          this.showClose = true
        })
    },
    /**获取续费字典 */
    getTypeList() {
      useDict('recharge_level').then((res) => {
        console.log('res', res)
        this.recharge_level_list = res.recharge_level
      })
    },
    handleSubmit() {
      this.$emit('update:show', false)
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.payList {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  & > :nth-child(n) {
    // padding: 0!important;
    margin: 0 !important;
    margin-bottom: 10px !important;
  }
}
</style>
